import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'
import { nanoid } from 'nanoid'

class Header extends Component {
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }

    render() {
        return (<div className="todo-header">
            <label>
                <input onKeyUp={this.onKeyDown} type="text"
                       placeholder="请输入你的任务名称，按回车键确认"/>
            </label>
        </div>)
    }

    onKeyDown = (e) => {
        const {target, keyCode} = e
        if (keyCode !== 13) return
        if (target.value.trim() === '') return
        this.props.addTodo({
            id: nanoid(), todoName: target.value, done: false
        })
        target.value = ''
    }
}

export default Header
